개발자 면접질문과 답변들. 더 많은 내용은 깃허브 저장소에서 확인할 수 있습니다 (https://github.com/jeonyeohun/GetReadyForInterview)

JavaScript

JS의 원시타입을 말해보세요.

• boolean, number, string, symbol, undefined, null 로 7가지가 있습니다.

Undefined 와 Null 의 차이를 설명해보세요.

• undefined 는 선언 후 초기화되지 않은 변수의 값이고, null 은 개발자가 변수에 값이 없다는 것을 명시하기 위해 의도적으로 사용하는 값입니다.

JS에서 call-by-value 와 call-by-reference 를 데이터 타입으로 설명해보세요.

• 모든 원시타입은 immutable 하기 때문에 변경이 불가능하므로 값이 전달될 때 복사하여 전달하는 call-by-value 를 사용합니다. 원시타입을 제외한 모든 데이터들의 타입인 객체타입은 call-by-reference 로 전달되며 값의 변경이 가능합니다.

let, const, var 의 차이를 설명해보세요.

• let 으로 선언된 변수는 값을 재할당할 수 있지만 const 로 선언된 변수를 값을 재할당할 수 없습니다. var 또한 변수를 재할당 할 수 있습니다.
• 유효범위에 대한 차이도 있습니다. var는 함수 내에서만 지역변수로 취급되고 나머지 스코프에서는 모두 전역변수로 취급됩니다. let과 const는 블록 내에서만 사용가능한 지역변수로 취급됩니다.

실행 컨텍스트의 생성과정을 설명해보세요.

• 실행 컨텍스트는 실행할 코드에 대한 정보를 모아둔 객체입니다.
• 먼저 새로운 함수가 실행되면 실행컨텍스트가 생성되고 활성 객체가 생성됩니다.
• 활성객체가 생성 되면 arguments 유사배열객체를 생성합니다. 함수의 인자가 되는 변수들이 이곳에 저장됩니다.
• 다음은 스코프 정보를 생성합니다. 스코프 정보는 현재 실행 컨텍스트의 유효 범위를 나타냅니다.
• 스코프 정보를 완성하면 변수를 생성하고 값을 초기화 합니다. 이때 초기화 되지 않은 값은 undefined 로 초기화됩니다.
• 마지막으로 this 키워드를 사용하는 변수의 값들을 할당합니다.

스코프 체이닝에 대해서 설명해보세요.

• 스코프 체이닝은 실행 컨텍스트에서 현재 활성 객체가 자신이 가지고 있지 않은 변수를 다른 실행 컨텍스트의 활성 객체를 참조하여 접근하는 방법입니다.
• 새로운 실행 컨텍스트가 만들어질 때마다 생성되는 활성 객체는 자신이 만들어지기 전 실행 컨텍스트의 스코프 체인을 복사하고 가장 앞의 자신의 활성 객체를 추가합니다.
• 변수가 참조될 때 실행 컨텍스트 내의 활성 객체의 스코프 체인을 확인하고 앞에서부터 전역객체까지 해당 변수가 존재하는지 차례대로 확인합니다.

프로토타입과 프로토타입 체이닝이 무엇인지 설명해보세요.

• 프로토타입은 Prototype Link 와 Prototype Object 로 구분됩니다.
• Prototype Object는 객체(함수)가 정의될 때 함께 생성되는 원형 객체로 생성자를 가집니다. 내부에는 constructor 와 __proto__ 속성이 존재하고 __proto__ 속성이 기존 객체를 가리키게 됩니다. 즉, 자신을 생성한 조상 객체를 가르킵니다.
• __proto__ 속성으로 자신의 조상이 되는 객체를 가르킵니다. 만약 어떤 객체가 자신이 가지고 있지 않은 속성을 요구받으면 __proto__ 속성을 타고 연결된 상위 객체로 접근하여 값이 존재하는지 확인합니다. 이것을 프로토타입 체이닝이라고 합니다.

여러 방식의 this 바인딩을 설명해보세요.

• 자바스크립트에서 this 는 메서드 호출과, 함수 호출에서 다른 동작을 취합니다.
• 메서드 호출에 사용되는 this 는 해당 메서드를 호출한 객체에 바인딩됩니다.
• 함수 호출에 사용되는 this 는 해당 함수를 전역객체인 window에 바인딩합니다.
• new 키워드로 생성자 함수를 호출하면 this 는 만들어진 객체 자기자신을 바인딩합니다.

정적 스코프에 대해서 설명해보세요.

• Lexical Scope는 함수를 선언했을 때 스코프가 생성되는 것을 의미합니다. 정적 스코프가 있기 떄문에 클로저와 호이스팅이 가능합니다.

클로저에 대해서 설명해보세요.

• 클로저는 함수가 자신의 블록 내부가 아닌 외부 스코프에 선언된 변수에 접근하는 것을 의미합니다.

function makeFunc() {
  var name = 'Mozilla'
  function displayName() {
    alert(name)
  }
  return displayName
}

var myFunc = makeFunc()
myFunc()

example from MDN

• 위 예시에서 displayName을 반환하고 이후에 호출할 때, displayName은 lexical한 정보를 가지고 있기 때문에 자신의 내부에 있는 name 에 대한 값이 존재하지 않아도 상위 함수에 있던 “Mozilla” 라는 값을 사용합니다.

호이스팅에 대해서 설명해보세요.

• 호이스팅은 모든 변수 선언을 최상단으로 끌어올리는 것을 의미합니다. 전역 범위에 있던 변수는 스크립트 최상단으로 올라가고, 함수 범위에 있던 변수는 함수 내의 최상단 위치로 올려집니다. 이때 초기화 값은 호이스팅되지 않고 선언만 호이스팅됩니다.

이벤트 위임, 이벤트 버블링, 이벤트 캡쳐링에 대해서 설명해보세요.

• 이벤트 위임은 어떤 태그의 상위 태크에 이벤트 리스너를 등록하여 하위 태그들의 이벤트를 처리하는 것을 말합니다. 예를 들어 ul li 태그로 이루어진 목록이 있을 때, 각 li 태그에 대해 모두 클릭이벤트를 처리하고 싶다면 ul 태크에 이벤트 위임을 하면 이벤트 리스너를 한 번만 등록하는 것으로 이벤트를 처리할 수 있습니다.
• 이벤트 버블링은 이벤트가 발생했을 때, 최상위 태그로 이벤트가 전달되는 특성을 의미합니다.
• 이벤트 캡쳐링은 이벤트 버블링과 반대로 최상위 태크에서 하위 태그까지 이벤트를 순차적으로 전달하는 것을 의미합니다. addEventListner()의 세번째 인자를 true로 지정하는 것으로 설정할 수 있습니다.

Throttle 과 Debounce 를 설명해보세요. 왜 사용할까요?

• Throttle은 어떤 함수가 호출된 이후에는 일정시간 동안 해당 함수가 다시 호출되지 않도록 합니다.
• Debounce는 특정 시간내에 발생한 동일한 이벤트를 그룹화하여 최초의 이벤트나 마지막 이벤트만 실행하도록 합니다.
• 스크롤이나 창 크기 조절과 같은 이벤트 처리 함수가 제한없이 실행되면 사용자가 조금만 움직여도 수많은 함수가 호출됩니다. 동일한 함수는 한번만 실행하도록 하여 리소스를 아낄 수 있습니다.

자바스크립트의 가비지 컬렉션을 설명해보세요.

• 자바스크립트는 도달가능상태(Reachability)를 확인해서 어떤 객체가 변수에 의해 참조될 수 있는 상태가 아니라면 해당 객체를 각제합니다.
• 가비지 컬렉터는 변수와 같은 루트를 설정하고 루트로부터 도달할 수 있는 모든 객체를 방문하여 마킹을 합니다. 만약 마킹되지 않은 객체들이 있다면 unreachable 이 되어 삭제합니다.

비동기 처리

동기처리와 비동기처리의 차이를 말해보세요.

• 동기처리는 한 요청 작업이 끝나야 다음 작업을 이어서 할 수 있는 방식이고 비동기처리는 한 요청작업이 진행되는 중에 다음작업을 바로 이어서 하는 방식입니다. 자바스크립트는 비동기 처리를 특성으로 가집니다.

Callback 함수에 대해서 설명해보세요.

• 비동기 처리를 위해 함수호출의 파라미터로 함수를 삽입하는 것을 의미합니다. 호출된 함수가 자신의 로직을 모두 종료하고 콜백함수를 실행하면 해당함수를 호출했던 함수가 미리 지정해둔 콜백함수를 실행합니다.

function callback(param) {
  console.log(param, 'is done!')
}

function callee(param, callback) {
  console.log(param)
  callback()
}
function caller(param) {
  callee(param, callback)
}

caller('hello')

// 결과:
// hello
// hello is done!

Promise 에 대해서 설명해보세요.

• 프로미스는 비동기처리를 위한 객체입니다.
• 프로미스는 생성자의 인자로 콜백 함수를 받고 이 함수는 resolve 와 reject 를 인자로 가집니다.
• resolve 는 프로미스의 콜백 함수가 성공적으로 완료됐을 때 실행되며 then 을 통해서 resolve의 결과 데이터는 받을 수 있습니다.
• reject 는 함수가 실패했을 때 실행되는 로직입니다. 프로미스 함수에 catch 를 사용해 에러 처리 로직을 지정할 수 있습니다.

Async & Await 에 대해서 설명해보세요.

• async/await 은 비동기 처리를 위해 ES6에서 새롭게 추가된 문법입니다.
• 함수의 선언 앞에 async 키워드를 붙이고 Promise 객체를 반환하는 함수의 호출 앞에 await 키워드를 붙입니다.
• Promise 보다 간결하고 가독성이 좋은 코드를 작성할 수 있습니다.

모던 자바스크립트

ES6(ES2015) 주요 업데이트

• 디폴트 파라미터 : 파라미터의 기본값을 정의할 수 있습니다.
• 템플릿 리터럴 : 문자열을 표현할 때 변수 등을 + 연산으로 붙이지 않고 표현할 수 있습니다.
• 화살표 함수 : 화살표 함수를 통해 익명함수를 쉽게 생성할 수 있습니다.
• 프로미스 객체 : 프로미스를 통해 비동기 처리를 쉽게 할 수 있습니다.
• let, const : 스코프 처리가 까다로웠던 var 를 대체하기 위해 블록 스코프를 지원하는 let과 const 가 추가되었습니다.
• Class : 클래스를 만들 수 있는 문법이 추가되었습니다.

ES7(ES2016) 주요 업데이트

• includes : 배열에 요소 존재여부를 확인할 수 있는 includes 함수가 추가되었습니다.

ES8(ES2017) 주요 업데이트

• asyc / await : 비동기 처리를 간단하게 할 수 있는 async/await 문법이 추가되었습니다.
• entries / values : 객체의 key-value 를 배열로 반환받는 entries 함수와 객체의 value를 배열로 반환받는 values 함수가 추가되었습니다.

ES9(ES2018) 주요 업데이트

• rest / spread : 객체와 배열을 복사할 수 있는 rest 와 배열을 분해해 요소들을 꺼낼 수 있는 spread 연산이 추가되었습니다.

ES11(ES2020) 주요 업데이트

• Optional Chaining : 객체의 참조가능한 값이 있을 때만 참조할 수 있는 문법이 추가되었습니다.

const person = {
  name: 'hun',
  age: {
    korean: 27,
    american: 25,
  },
  nationality: korea,
}

console.log(person.age.korean)
// 결과
// 27

const person = {
  name: 'hun',
  nationality: korea,
}

console.log(person.age.korean)
// 결과
// Error

const person = {
  name: 'hun',
  nationality: 'korea',
}

console.log(person?.age?.korean)
// 결과
// undefined

• null 병합 연산자 : 왼쪽 피연산자가 null 이나 define일 경우에만 오른쪽 피연산자를 반환하고 그 외에는 왼쪽 피연산자를 그대로 반환하는 문법이 추가되었습니다. 0이나 빈 문자열 같은 falsy 값 때문에 발생하는 오류를 최소화할 수 있습니다.

const foo = null ?? 'default'
console.log(foo)
// 결과
// 'default'